<template>
    <div>
        <el-page-header @back="goBack" content="草稿箱"></el-page-header>
        <div class="common_line"></div>
        <el-form :model="queryParams" label-width="auto">
            <el-row>
                    <el-col :span="7">
                        <el-form-item label="关键词:">
                            <el-input style="width: 240px;" maxlength="100" v-model="keyword" placeholder="订单编号/商品名称/备注" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="供货商:">
                            <el-select
                                style="width: 240px;" 
                                v-model="queryParams.supplier_name"
                                filterable
                                remote
                                clearable
                                no-data-text="未匹配到此供货商"
                                placeholder="请输入名称"
                                :loading="showLoading"
                                @change="value => personChange(value)"
                                :remote-method="(query) => remoteMethodWithCustomer(query)">
                                <el-option
                                    v-for="item in supplierList"
                                    :key="'customer_'+item.id"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="采购日期:">
                            <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" 
                                v-model="queryParams.create_datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                                placeholder="请选择时间区间" style="width: 240px;" clearable></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button size="small" icon="el-icon-search" @click="handleQuery"
                            style="margin: 8px 0 0 20px;" class="btn_primary_color">查询</el-button>
                    </el-col>
            </el-row>
        </el-form>
        <el-table border :data="buyLists" style="margin-top: 15px;">
            <!-- <el-table-column type="selection" width="55" align="center" /> -->
            <el-table-column label="供货商名称" align="left" prop="supplierName" />
            <el-table-column label="预付定金" align="left" prop="shouldReceived" />
            <el-table-column label="采购时间" align="left" prop="purchase_date" />
            <el-table-column label="经办人" align="left" prop="handler" />
            <!-- <el-table-column label="订单状态" align="left" prop="statusName">
                <template slot-scope="scope">
                    <span v-if="scope.row.status=='0'" style="color: red;">{{ scope.row.statusName }}</span>
                    <span v-else-if="scope.row.status=='1'" style="color: #00b8ae;">{{ scope.row.statusName }}</span>
                    <span v-else style="color: red;">{{ scope.row.statusName }}</span>
                </template>
            </el-table-column> -->
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleEdit(scope.row)"
                        style="font-weight: bold;"
                    >编辑</el-button>
                    <el-button
                        size="mini"
                        type="text"
                        @click="handleRemove(scope.row)"
                        style="font-weight: bold;"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-show="total>0"
            background
            style="padding: 32px 16px;background: #fff;text-align: right;"
            @size-change="getOrderLists"
            @current-change="getOrderLists"
            :current-page.sync="pageParam.page"
            :page-size="pageParam.num"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { getSupplierList } from "@/api/cooperate";
import { getBuyReserveList, removeBuyeReserve } from "@/api/purchase";

export default {
    name: 'purchasedraftBox',
    data() {
        return {
            showLoading: false,
            corp_id: '',
            editId: null,  //订单id
            keyword: '',
            queryParams: {
                supplier_id: '',
                supplier_name: '',
                create_datetime: [],
                purchase_date__lte: '',  //小于等于
                purchase_date__gte: '',  //大于等于
            },
            pageParam: {
                page: 1,
                num: 10
            },
            total: 0,
            buyLists: [],
            supplierList: [],
        }
    },
    watch: {
        'queryParams.create_datetime': {
            handler(value){
                if(value){
                    this.queryParams.purchase_date__lte = value[1]
                    this.queryParams.purchase_date__gte = value[0]
                }
                else{
                    this.queryParams.purchase_date__lte = this.queryParams.purchase_date__gte = null
                }
            },
            deep: true
        }
    },
    mounted() {
        this.corp_id = this.$store.state.corpId
        this.isAdmin = this.$store.state.isAdmin
        this.getOrderLists()
    },
    methods: {
        goBack() {
            this.$emit('hidden', '')
        },
        // 按条件筛选
        handleQuery() {
            this.pageParam.page = 1
            if (this.keyword){
                this.queryParams._search = this.keyword
            }else{
                delete this.queryParams['_search']
            }
            this.getOrderLists()
        },
        // 获取订单列表
        getOrderLists(){
            this.queryParams.corp = this.corp_id
            this.queryParams.is_draft = 1
            let params = Object.assign({}, this.queryParams, this.pageParam)
            getBuyReserveList(params).then(res => {
                let list = res.data.data.reserve_list.filter(item => {
                    item.supplierName = item.supplier_detail.name
                    item.corp_order_no = item.corp_order_no || ''
                    item.handler = item.handler_user_detail ? item.handler_user_detail.username:''
                    item.shouldReceived = item.prepaid_money?parseFloat(item.prepaid_money).toFixed(2):"0.00"
                    item.pending_payment = item.pending_payment?parseFloat(item.pending_payment):'0.00'
                    
                    let statusName = '', bgcolor = '', txtcolor = '';
                    switch (item.reserve_status){
                        case 0:
                            statusName = '预定失败'
                            bgcolor = 'red'
                            txtcolor = 'red'
                            break;
                        case 1:
                            statusName = '预定单'
                            bgcolor = '#e6e6e6'
                            txtcolor = '#666'
                            break;
                        case 2:
                            statusName = '已转单'
                            bgcolor = '#07c160'
                            txtcolor = '#07c160'
                            break;
                        case 3:
                            statusName = '已取消'
                            bgcolor = '#f9ae3d'
                            txtcolor = '#f9ae3d'
                            break;
                        default:
                            break;
                    }
                    item.statusName = statusName
                    item.bgcolor = bgcolor
                    item.txtcolor = txtcolor
                    return item
                })
                this.buyLists = list
                this.total = res.data.data.total
            })
        },
        // 编辑
        handleEdit(item) {
            this.$emit('callback', item)
        },
        // 删除
        handleRemove(item) {
            let that = this
            this.$confirm('您确定要删除该采购预定单吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                removeBuyeReserve(item.id, {
                    corp: that.corp_id
                }).then(res => {
                    if (res.code == 200){
                        that.handleQuery()
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        })
					}
                })
            }).catch(() => {        
            });
        },
        // 选择供货商
        personChange(value) {
            let [ id, name ] = value.split('&&')
            this.queryParams.supplier_id = id
            this.queryParams.supplier_name = name
        },
        remoteMethodWithCustomer(query) {
            if (query !== '') {
                this.showLoading = true
                getSupplierList({
                    corp: this.corp_id,
                    category: '',
                    search: query
                }).then(res => {
                    this.showLoading = false
                    this.supplierList = res.data.data.supplier_list.filter(item => {
                        item.label = item.name
                        item.value = item.id+'&&'+item.name
                        if (item.category_detail && item.category_detail.name){
                            item.label += ('（'+item.category_detail.name+'）')
                        }
                        return item
                    });
                })
            } else {
                this.supplierList = []
            }
        },
    }
}
</script>

<style lang="less" scoped>
    @import '../../../style/mixin.less';
</style>